<template>
	<view class="echarts-wrap">
		<UniEcharts class="ec-canvas" @onInit="myinit" canvasId="demo-canvas" ref="chart" />
	</view>
</template>

<script>
	import * as echarts from "echarts";
	import UniEcharts from './UniEcharts'
	let chart = null
	export default {
		components: {
			UniEcharts
		},
		props: {
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '500rpx'
			},
			dataList: {
				type: [Object,Array],
				required: true
			}
		},
		watch: {
			dataList(val) {
				uni.$emit('changeDataList')
			},
		},
		methods: {
			// 就是返回echarts配置项的
			getOptions() {
				const {
					xData,
					yData
				} = this.dataList
				let option = {
					grid: {
						left: 2,
						right: 20,
						bottom: 25,
						top: 45,
						containLabel: true,
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					xAxis: {
						data: xData,
						// data:["06", "09"],
						boundaryGap: false,
						axisLine: {
							show: false,
							lineStyle: {
								color: "#656468"
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							fontSize: 10
						},
					},
					yAxis: {
						axisLine: {
							show: false,
							lineStyle: {
								color: "#656468"
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							fontSize: 10
						},
						splitLine: {
							lineStyle: {
								type: 'dashed',
								color: "#aaaaaa",
							},
						},
					},
					series: [{
						data: yData,
						// data:[35, 0],
						type: 'line',
						smooth: true,
						symbol: 'none',
						sampling: 'average',
						itemStyle: {
							color: this.$store.state.themeConfig.primaryColor //'#70c8e2'
						},
						areaStyle: {
							opacity: 0.9,
							color: {
								type: 'linear', // 线性渐变
								x: 0, // x: 从左向右 1 ——> 0
								y: 0, // y: 从上向下 1 ——> 0
								x2: 0, // x2: 从右向左 1 ——> 0
								y2: 1, // y2: 从下向上 1 ——> 0
								colorStops: [{
										offset: 0,
										color: '#ffb8b8'
									},
									{
										offset: 1,
										color: '#ffffff'
									}
								],
							}
						},
					}]
				}
				return option
				// const option = {
				// 	xAxis: {
				// 		type: 'category',
				// 		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				// 	},
				// 	yAxis: {
				// 		type: 'value'
				// 	},
				// 	series: [{
				// 		data: [150, 230, 224, 218, 135, 147, 260],
				// 		type: 'line'
				// 	}]
				// }
				// 
			},
			myinit(e) {
				let {
					width,
					height,
					canvasDpr
				} = e
				let canvas = this.$refs.chart.canvas
				echarts.setCanvasCreator(() => canvas)
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				// console.log(this.getOptions());
				chart.setOption(this.getOptions())
				this.$refs.chart.setChart(chart)
			}
		}
	}
</script>
<style>
	.echarts-wrap {
		width: 100%;
		height: 500rpx;
	}
</style>
